{% extends "nav.html" %}
{% block little %}存储光交综合管理系统{% endblock %}
{% block content %}
    <!-- Main Content -->
    <div class="container-fluid">
        <div class="side-body padding-top">
            <div class="row">
                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                    <a href="#">
                        <div class="card red summary-inline">
                            <div class="card-body">
                                <i class="icon fa fa-inbox fa-4x"></i>
                                <div class="content">
                                    <div class="title">{{ stordata |length }}</div>
                                    <div class="sub-title">已统计存储数量</div>
                                </div>
                                <div class="clear-both"></div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                    <a href="#">
                        <div class="card yellow summary-inline">
                            <div class="card-body">
                                <i class="icon fa fa-comments fa-4x"></i>
                                <div class="content">
                                    <div class="title">{{ sandata | length }}</div>
                                    <div class="sub-title">已统计光交数量</div>
                                </div>
                                <div class="clear-both"></div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                    <a href="#">
                        <div class="card green summary-inline">
                            <div class="card-body">
                                <i class="icon fa fa-tags fa-4x"></i>
                                <div class="content">
                                    <div class="title">{{ hostdata|length }}</div>
                                    <div class="sub-title">已统计主机数量</div>
                                </div>
                                <div class="clear-both"></div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                    <a href="#">
                        <div class="card blue summary-inline">
                            <div class="card-body">
                                <i class="icon fa fa-share-alt fa-4x"></i>
                                <div class="content">
                                    <div class="title">{{ workdata|length }}</div>
                                    <div class="sub-title">已统计需求量</div>
                                </div>
                                <div class="clear-both"></div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
            <div class="row  no-margin-bottom ">
                <div class="col-sm-6 col-xs-12 ">
                    <div id="ceshibingtu" class="col-xs-12"  style="height:400px;"></div>
                </div>
                <div class="col-sm-6 col-xs-12">
                    <div id="tubiao2" class="col-xs-12"  style="height:400px;"></div>
                </div>
            </div>
            <div class="">
                <div class="panel-body">
                    <div class="col-sm-4 col-xs-12">
                        <div class="panel panel-primary">
                            <div class="panel-heading">需求</div>
                            <!-- Table -->
                            <table class="table table-hover">
                                {% for i in workmessdata %}
                                    <tr>
                                        <td>{{ i.WO_time |date}}</td>
                                        <td>{{ i.WO_department }}</td>
                                        <td>{{ i.WO_CAP }}</td>
                                        <td>{{ i.WO_text|slice:"10" }}</td>
                                        <td>{{ i.WO_people }}</td>
                                        <td>{{ i.WO_fishtime|date }}</td>
                                    </tr>
                                {% endfor %}
                            </table>
                        </div>
                    </div>
                    <div class="col-sm-4 col-xs-12">
                        <div class="panel panel-danger">
                            <div class="panel-heading">故障情况</div>
                            <!-- Table -->
                            <table class="table table-hover">
                                <table class="table table-hover">
                                    {% for i in faultdata %}
                                        <tr>
                                            <td>{{ i.FA_time |date}}</td>
                                            <td>{{ i.FA_Reason|slice:"5" }}</td>
                                            <td>{{ i.FA_Grade }}</td>
                                            <td>{{ i.FA_Processing |slice:"5" }}</td>
                                            <td>{{ i.FA_fishtime|date }}</td>
                                            {% if i.ST_storage.ST_prodect %}
                                                <td>{{ i.ST_storage.ST_prodect }}</td>
                                            {% elif i.ST_san.prodect %}
                                                <td>{{ i.ST_san.prodect }}</td>
                                            {% endif %}
{#                                            <td>{{ i.ST_storage.ST_prodect }}{{ i.ST_san.prodect }}</td>#}
                                        </tr>
                                    {% endfor %}
                                </table>
                        </div>
                    </div>
                    <div class="col-sm-4 col-xs-12">
                        <div class="panel panel-info">
                            <div class="panel-heading">历史知识库</div>

                            <!-- Table -->
                            <table class="table table-hover">

                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block js %}

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        $(function(){
            var myChart = echarts.init(document.getElementById('ceshibingtu'));

            option = {
                baseOption: {
                    timeline:{
{#                        data: {{ guihuatime }},#}
                        data: ['2017-12-31','2018-12-31'],
                        autoPlay: true,
                        playInterval: 3000,
                        botton:"0px",
                    },
                    title: {
                        text: '2017年存储规划(T)',
                        left:'20%'
                    },
                    tooltip: {},
                    legend: {
                        data:['销量']
                    },
                    xAxis: {
                        data: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]
                    },
                    yAxis: {
                        nameTextStyle: {
                            fontSize: 51
                        },
                    },
                    series: [
                        {
                            name: '容量（T）',
                            type: 'bar',
                        },
                    ],
                },
                options: [
                    { // 这是'2002-01-01' 对应的 option
                        title: {
                            text: '2017年存储规划(T)'
                        },
                        series: [
                            {data:{{ data2017}}},
                        ]
                    },
                    { // 这是'2002-01-01' 对应的 option
                        title: {
                            text: '2018年存储规划'
                        },
                        series: [
                            {data:{{ data2018}}},
                        ]
                    },
                ],
            };
            myChart.setOption(option);
        });
        $(function(){
            var myChart = echarts.init(document.getElementById('tubiao2'));
            var option = {
                title : {
                    text: '存储裸容量图表',
                    subtext: '裸容量{{ totalstorage }}T',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },

                series : [
                    {
                        name: '存储裸容量',
                        type: 'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data:[
                            {% for i in stordata %}
                                {value:{{ i.ST_totalrawcap }}, name:'{{ i.ST_prodect }}({{ i.ST_sn }})'},
                            {% endfor %}
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
        })
    </script>
{% endblock %}